<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>群星网约车</title>
  <link rel="icon" href="../image/carMR.png" type="image/png">
  <style>
    .order-table {
      padding: 40px;
    }
  </style>
</head>
<!--引入相关的文件-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<body>
<div id="app">
  <div class="order-table">
    <span>编号查询：</span>
    <el-input v-model="search" placeholder="司机编号搜索" clearable @clear="handleSearch" @input="handleSearch" style="max-width: 200px;"></el-input>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span>状态查询：</span>
    <el-input v-model="searchOrder" placeholder="司机状态搜索" clearable @clear="handleSearch" @input="handleSearch" style="max-width: 200px;"></el-input>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span>车辆查询：</span>
    <el-input v-model="searchVehicle" placeholder="司机车辆搜索" clearable @clear="handleSearch" @input="handleSearch" style="max-width: 200px;"></el-input>
    <el-table :data="orders" style="width: 100%">
      <el-table-column prop="id" label="司机编号" width="120"></el-table-column>
      <el-table-column prop="username" label="司机昵称" width="120"></el-table-column>
      <el-table-column prop="phoneNumber" label="手机号" width="150"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
      <el-table-column prop="driverVehicles.vehicleType" label="车辆类型" width="120"></el-table-column>
      <el-table-column prop="driverVehicles.color" label="车辆颜色" width="120"></el-table-column>
      <el-table-column prop="licensePlate" label="车牌号" width="200"></el-table-column>
      <el-table-column prop="status" label="司机状态" width="120">
        <template slot-scope="scope">
          <el-tag
                  :type="getDriverStatusType(scope.row.status)"
                  @click="confirmUpdateUserStatus(scope.row)"
          >
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalOrders"
            :page-size="pageSize"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 50]"
            @current-change="handlePageChange"
            @size-change="handleSizeChange">
    </el-pagination>
  </div>
</div>


<script>
  // request拦截器，将用户token放入头中
  axios.interceptors.request.use(
          config => {
            let token = localStorage.getItem("token"); // 确保 token 正确存储在 localStorage 中
            if (token) {
              config.headers['token'] = token;
            }
            return config;
          },
          error => {
            console.log(error);
            return Promise.reject(error);
          }
  );
  // 创建一个vue的实例对象,里面写那些数据和方法(一个是页面加载完后自动执行的方法，一个是其他操作后执行的代码)
  // 创建 Vue 实例
  new Vue({
    el: '#app',
    data() {
      return {
        userId: "",
        userName: "",
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', // 默认头像链接
        search: '',
        searchOrder: '',
        searchVehicle: '',
        currentPage: 1,
        pageSize: 10,
        totalOrders: 0,
        orders: [
          { id: '123', username: '小米', phoneNumber: '15115902252',vehicleType: '豪华型',color: '白色' ,licencePlate: '京ABC',email: '936482013@qq.com', status: '活跃' },
          { id: '123', username: '小米', phoneNumber: '15115902252',vehicleType: '豪华型',color: '白色' ,licencePlate: '京A8888',email: '936482013@qq.com', status: '冻结' },
        ],
        statusMap: {  // 在 data 中定义映射关系
          '在线': '1',
          '接单中': '2',
          '离线': '3',
          '暂停服务': '4',
        }
      }
    },
    methods: {
      fetchOrders() {
        const mappedStatus = this.statusMap[this.searchOrder] || this.searchOrder;
        axios.get(`/driver/drivers/getDriverByManager`, {
          params: {
            page: this.currentPage,
            size: this.pageSize,
            keyword: this.search,
            keywordOrder: mappedStatus,
            searchVehicle: this.searchVehicle
          }
        }).then(response => {
          if (response.data.code === 1) {
            console.log("成功获取订单信息");
            const orders = response.data.data.list.map(order => {
              switch (order.status) {
                case '1':
                  order.status = '在线';
                  break;
                case '2':
                  order.status = '接单中';
                  break;
                case '3':
                  order.status = '离线';
                  break;
                case '4':
                  order.status = '暂停服务';
                  break;
                default:
                  order.status = '未知状态'; // 添加默认情况处理
              }
              // 处理发起时间
              if (order.orderDate) {
                order.orderDate = order.orderDate.replace('T', ' ');
              }
              return order;
            });
            this.orders = orders;
            this.totalOrders = response.data.data.total;
          }
        });
      },
      handleSearch() {
        this.currentPage = 1;
        this.fetchOrders();
      },
      handlePageChange(page) {
        this.currentPage = page;
        this.fetchOrders();
      },
      handleSizeChange(size) {
        this.pageSize = size;
        this.currentPage = 1;
        this.fetchOrders();
      },
      getDriverStatusType(status) {
        switch (status) {
          case '暂停服务':
            return 'info';
          case '在线':
            return 'success';
          case '离线':
            return 'danger';
          case '接单中':
            return 'warning';
          default:
            return '';
        }
      },
      confirmUpdateUserStatus(order) {
        const newStatus = order.status === '暂停服务' ? '离线' : '暂停服务';
        this.$confirm(`确认要将状态修改为${newStatus}吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.updateUserStatus(order, newStatus);
        }).catch(() => {
          this.$message.info('取消修改');
        });
      },
      updateUserStatus(order, newStatus) {
        axios.put(`/driver/drivers/updateDriverStatus`, {
          id: order.id,
          status: this.statusMap[newStatus]
        }).then(response => {
          if (response.data.code === 1) {
            this.$message.success('状态更新成功');
            order.status = newStatus;
          } else {
            this.$message.error('状态更新失败');
          }
        }).catch(error => {
          console.log(error);
          this.$message.error('状态更新失败');
        });
      },
    },
    mounted(){
      var id=localStorage.getItem('userId');
      this.userId = parseInt(id, 10);
      this.userName = localStorage.getItem('userName');
      this.avatar = localStorage.getItem('pic');
      this.fetchOrders();
    }
  });
</script>
<!-- 不用vue的js代码写在下面-->
<script>
</script>
</body>
</html>